<template>
    <div id="box">
        <div id="header">
            <div></div>
            <span>消息列表</span>
            <router-link to='/home/login'><van-icon name="arrow-left" /></router-link>
        </div>
        <div id="bodyer">
            <div v-if='wd.length>0'>
                <p>未读消息</p>
                <nav class="lis" v-for="v,k in wd" @click="wd_click(k)" :key="k">
                    <div><img :src="v.author.avatar_url" alt=""></div>
                    <nav>
                        <span>{{v.author.loginname}}</span>
                        <p>{{v.content}}</p>
                    </nav>
                    <span>{{date(v.last_reply_at ).locale('zh-cn').fromNow()}}</span>
                </nav>
            </div>
            <div v-if='lis.length>0'>
                <p>已读消息</p>
                <nav class="lis" v-for="v,k in lis"  @click="yd_click(k)"  :key="k">
                    <div><img :src="v.author.avatar_url" alt=""></div>
                    <nav>
                        <span>{{v.author.loginname}}</span>
                        <p>{{v.content}}</p>
                    </nav>
                    <span>{{date(v.last_reply_at ).locale('zh-cn').fromNow()}}</span>
                </nav>
            </div>
        </div>
    </div>
</template>
<script>
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/zh-cn";
dayjs.extend(relativeTime);
export default {
    data(){
        return {
            lis:[],
            wd:[],
            date:''
        }
    },
    created(){
        let d = JSON.parse(window.localStorage.getItem('user'))
        this.axios.get('https://cnodejs.org/api/v1/messages?accesstoken='+d.acc).then(res=>{
            this.lis=res.data.data.has_read_messages
            this.wd = res.data.data.hasnot_read_messages
        })
        this.date = dayjs
    },
    methods:{
        wd_click(k){
            console.log(k)
        },
        yd_click(k){
            console.log(k)
        }
    }
}
</script>
<style lang="scss" scoped>
#box{
    width:100%;
    height:100vh;
    display: flex;
    flex-direction: column;
    background: #f1f1f1;;
    >#header{
        height:.5rem;
        width:100%;
        background-image: linear-gradient(to right top  , #e9028d, #6937b5);
        position: relative;
        >span{
            font-size:.18rem;
            color: white;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom:.1rem;
        }
        >div{
            height: 0.5rem;;
        }
        >a{
            font-size:.2rem;
            color: #fff;
            position: absolute;
            left:0.04rem;
            bottom:.08rem;
        }
    }
    >#bodyer{
        flex-grow: 1;
        overflow: auto;
        box-sizing: border-box;
        width:100%;
        >div>p{
            font-size:.16rem;
            height:.3rem;
            line-height: .3rem;
            padding-top:.1rem;
            background: white;
            padding-left:.1rem;
        }
    }
}
.lis{
    min-height: .4rem;
    width:100%;
    margin:0rem 0px .08rem;
    display: flex;
    position: relative;
    box-sizing: border-box;
    padding:.08rem .1rem;
    background:white;
    >div{
        width:.4rem;
        height:.4rem;
        background:#aaa;
        border-radius:.06rem;
        overflow: hidden;
        >img{
            width:100%;
        }
    }
    >span{
        position: absolute;
        right:.1rem;
        top:.08rem;
        font-size:.12rem;
        color:#aaa;
    }
    >nav{
        margin-left:.1rem;
        width:3.05rem;
        display: flex;
        flex-wrap: wrap;
        >span{
            height:.2rem;
            line-height: .2rem;
            font-size:.16rem;
            color: #8799a3;
        }
        >p{
            color: #aaaaaa;
            width: 100%;
            height:.2rem;
            line-height: .2rem;
            font-size:.14rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}
</style>